/**
 * 分销商管理编辑
 *
 * @author xxf
 * @date 2018/2/7
 * */
import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input,  Button, Card, Radio,
} from 'antd';
import {routerRedux} from 'dva/router';
import {message} from "antd/lib/index";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(state => ({
    submitting: state.distributorManage.submitting,
}))

@Form.create()
export default class DistributorManageEdit extends PureComponent{
    state={
        modalVisible:false,
        record:{},
    }

    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    }

    handleSubmit=()=>{
        const {dispatch}=this.props
        this.props.form.validateFields((err,values)=>{
            if(!err){
                dispatch({
                    type:'distributorManage/updateDistributor',
                    payload:{...values,
                        user_id:this.props.record.user_id},
                    callback:(response)=>{
                        if(response.result===0){
                            this.props.handleModalVisible(false);
                            this.props.dispatch({
                                type:'distributorManage/queryAll',
                            });
                            message.success("操作成功")
                        }else{
                            this.props.handleModalVisible(true);
                            message.error("操作失败")
                        }
                    }
                })
            }
        })
    }

    checkPhone=(rule,value,callback)=>{
        if (!/^1[34578]\d{9}$/.test(value)){
            callback("电话号码格式不正确");
        }
        callback()
    }

    render() {
        const {submitting,record} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const id=this.props.record.id;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <Card bordered={false}>
                <Form
                    onSubmit={this.handleSubmit}
                    hideRequiredMark
                >
                    <FormItem {...formItemLayout} label="真实姓名">
                        {(getFieldDecorator("user_name", {
                            initialValue: record.user_name,
                            rules: [{
                                required: true, message: '真实姓名不能为空'
                            }],
                        }))(<Input placeholder="真实姓名" disabled/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="分销商电话">
                        {(getFieldDecorator("phone", {
                            initialValue: record.phone,
                            rules: [{
                                required: true,
                                whitespace:true,
                                message: '分销商电话不能为空',
                            },{
                                validator:this.checkPhone
                            }],
                        }))(<Input placeholder="分销商电话" type={'tel'}/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="状态">
                        {(getFieldDecorator("is_validated", {
                            initialValue: record.is_validated,
                        }))(<Radio.Group>
                            <Radio value={1}>生效</Radio>
                            <Radio value={0}>不生效</Radio>
                        </Radio.Group>)}
                    </FormItem>
                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button loading={submitting}
                                onClick={this.handleSubmit}>
                            提交
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
                    </FormItem>
                </Form>
            </Card>
        );

    }
}